<template>
  <div class="msg-box">
    <div class="notice-list">
      <div v-for="(item) in msgList" :key="item.id" class="notice-item" @click="handleView(item)">
        <i class="el-icon-message" />
        <div v-if="item.state == 0" class="unread width50 ml10 mr10 font15">[未读]</div>
        <div v-if="item.state == 1" class="read width50 ml10 mr10 font15">[已读]</div>
        <div class="title mr10 font15">{{ item.name }}</div>
        <div class="time">{{ item.time }}</div>
      </div>
    </div>
    <NoticeDetail ref="noticeDetail" @refreshList="getList" />
  </div>
</template>
<script>
import { noticeList } from '@/api/process/notice'
import NoticeDetail from '@/components/notice/detail'

import { getHomeSysMessageList } from '@/api/dashboard'
// 搜索
export default {
  components: { NoticeDetail },
  data() {
    return {
      dialogVisible: false,
      queryParams: {},
      total: 0,
      loading: false,
      msgList: [],
      listQuery: {
        pageIndex: 1,
        pageSize: 10,
        title: '',
        creator: ''
      }
    }
  },
  created() {

  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getHomeSysMessageList().then(res => {
        this.msgList = res.records
        this.loading = false
      })
    },
    handleView(row) {
      this.$refs.noticeDetail.open(row)
    }
  }
}

</script>
<style lang="scss" scoped>
.notice-item {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    margin-bottom: 10px;
    border-bottom: 1px dashed #f0f0f0;
    padding-bottom: 10px;

    .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .read {
        color: #999;
    }

    .time {
        margin-left: auto;
        font-size: 15px;
    }
}
</style>
